<template>
  <div class="main">
    <div class="header">
      <div>
        <i class="iconfont icon-back"></i>
      </div>
      <div>
        <h2 v-on:click="a()">商品详情</h2>
      </div>
      <div>
        <i class="iconfont icon-cart"></i>
        <i class="iconfont icon-gengduo"></i>
      </div>
    </div>
    <div class="content">
      <div class="banner">
        <div class="container">
          <ul class="pic clear">
            <li><img src="../image/2za8w2c0mn0qszdxludbezkftkmo08.jpg" alt="轮播图"></li>
          </ul>
        </div>
        <ul class="btn">
          <li class="on"></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <div class="pro-details">
        <div class="item-1">
          <span class="brands">Rominz</span>
          <span class="price">￥159</span>
          <span class="old-price">价格
            <b style="text-decoration:line-through;">299</b>
          </span>
        </div>
        <div class="item-2">
          <p>Rominz诺曼姿[普罗旺斯之吻系列] 舒润柔肤机能水修护舒缓滋润保湿
          </p>
        </div>
        <div class="item-3">
          <i class="iconfont icon-skip"></i>
          <span>分享有赏</span>
        </div>
      </div>
      <h3 class="data">
        <p>快递：免运费</p>
        <p>月销999笔</p>
        <p>北京通州</p>
      </h3>
      <h3 class="reward">
        <span>积分</span>
        <p>购买可获得积分</p>
        <i class="iconfont icon-more"></i>
      </h3>
      <h3 class="reward">
        <p>产品规格</p>
        <i class="iconfont icon-more"></i>
      </h3>
      <h3 class="title">
        产品详情
      </h3>
      <div class="info">
        <img src="../image/pro_info1.jpg" alt="1">
        <img src="../image/pro_info2.jpg" alt="2">
        <img src="../image/pro_info3.jpg" alt="3">
        <img src="../image/pro_info4.jpg" alt="4">
        <img src="../image/pro_info5.jpg" alt="5">
        <img src="../image/pro_info6.jpg" alt="6">
      </div>
    </div>
    <div class="footer">
      <div class="service">
        <div>
          <i class="iconfont icon-box"></i>
          <p>商城</p>
        </div>
        <div>
          <i class="iconfont icon-service"></i>
          <p>客服</p>
        </div>
        <div>
          <i class="iconfont icon-favorite"></i>
          <p>收藏</p>
        </div>
      </div>
      <div class="button">
        <div class="add">添加购物车</div>
        <div class="pay">立即购买</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    a() {
      console.log("a");
    }
  }
};
</script>

<style scoped lang="less">
.main {
  color: #ffffff;
}
.header {
  display: flex;
  height: 80px;
  background-color: #6a7531;
  div {
    width: 33.33%;
    height: 80px;
    line-height: 80px;
    font-size: 36px;
    h2 {
      text-align: center;
    }
    i {
      font-size: 52px;
    }
  }
  div:first-child {
    text-align: left;
    i {
      margin-left: 15px;
    }
  }
  div:last-child {
    text-align: right;
    i {
      margin-right: 15px;
    }
  }
}
.content {
  .banner {
    position: relative;
    width: 100%;
    .container {
      width: 100%;
      overflow: hidden;
      .pic {
        width: 100%;
        list-style: none;
        li {
          float: left;
          width: 100%;
          img {
            display: block;
            width: 100%;
          }
        }
      }
    }
    .btn {
      position: absolute;
      bottom: 21px;
      width: 91px;
      height: 20px;
      left: 50%;
      margin-left: -45.5px;
      li {
        float: left;
        width: 20px;
        height: 20px;
        background-color: #6a7531;
        border-radius: 50%;
      }
      li:first-child {
        margin-right: 15px;
      }
      li:last-child {
        margin-left: 15px;
      }
      .on {
        background-color: #ffffff;
      }
    }
  }
  .pro-details {
    display: flex;
    height: 215px;
    color: #333333;
    .item-1 {
      width: 20%;
    }
    .item-3 {
      width: 18%;
      i {
        display: block;
        text-align: center;
        color: #676767;
        margin-top: 28px;
        font-size: 36px;
      }
      span {
        display: block;
        text-align: center;
        margin-top: 5px;
        color: #bf3838;
        font-size: 22px;
      }
    }
    .item-2 {
      width: 62%;
      p {
        margin-top: 24px;
        font-size: 30px;
        line-height: 35px;
      }
    }
    .item-1 {
      span {
        display: block;
        font-size: 24px;
        margin-left: 25px;
      }
      .brands {
        width: 100px;
        height: 40px;
        background-color: #6a7531;
        color: #ffffff;
        text-align: center;
        line-height: 40px;
        margin-top: 24px;
      }
      .price {
        font-size: 36px;
        color: #fb0303;
        margin-top: 27px;
      }
      .old-price {
        margin-top: 17px;
      }
    }
  }
  .data {
    display: flex;
    height: 50px;
    border-bottom: #eeeeee 1px solid; /*no*/
    p {
      width: 33.33%;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 24px;
      color: #808080;
    }
  }
  .reward {
    height: 59px;
    line-height: 59px;
    border-bottom: #eeeeee 1px solid; /*no*/
    padding-left: 28px;
    span {
      float: left;
      padding: 0 6px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #fb0303;
      border: #fb0303 1px solid;
      font-size: 22px;
      margin: 14px 24px 14px 0;
    }
    p {
      float: left;
      font-size: 22px;
      color: #666666;
    }
    i {
      float: right;
      color: #666666;
      margin-right: 30px;
      font-size: 30px;
    }
  }
  .title {
    height: 75px;
    line-height: 75px;
    text-align: center;
    font-size: 24px;
    color: #808080;
  }
  .info {
    margin-bottom: 99px;
    img {
      display: block;
      width: 100%;
    }
  }
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 98px;
  list-style: none;
  border-top: #e4e4e4 1px solid; /*no*/
  display: flex;
  background-color: #ffffff;
  .service {
    width: 50%;
    display: flex;
    div {
      width: 33.33%;
      color: #444444;
      font-size: 24px;
      text-align: center;
      i {
        display: block;
        font-size: 42px;
        margin: 10px 0;
      }
    }
  }
  .button {
    display: flex;
    width: 50%;
    font-size: 30px;
    div {
      width: 50%;
      height: 98px;
      line-height: 98px;
      text-align: center;
    }
    .add {
      background-color: #fe5900;
    }
    .pay {
      background-color: #fb0303;
    }
  }
}
</style>